<script>
import {
  defineComponent,
  h,
  computed,
  onMounted,
} from 'vue'
import { RouterView, useRoute } from 'vue-router'
import { ElScrollbar } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import MainHeader from './components/header'

export default defineComponent({
  name: 'App',

  setup() {
    const route = useRoute()

    const isComponent = computed(() => /^component-/.test(route.name || ''))

    onMounted(() => {})

    return {
      isComponent,
    }
  },

  render() {
    const notComponent = !this.isComponent

    const mainHeader = h(MainHeader, {
      style: 'position: fixed;top: 0;width: 100%;z-index: 2000',
    })

    const content = [
      h(
        'div',
        {
          class: 'main-cnt',
        },
        [h(RouterView)],
      ),
    ]

    const contentWrapper = notComponent
      ? h(ElScrollbar, null, { default: () => content })
      : content

    return h(
      'div',
      {
        id: 'app',
        class: {
          'is-component': this.isComponent,
        },
      },
      [mainHeader, contentWrapper],
    )
  },
})
</script>
